<template>
  <div id="app">
    <MusicItem :item="item" 
    v-for="item of playlists" :key="item.id" />
  </div>
</template>

<script>
import MusicItem from './components/MusicItem'
import axios from 'axios'

export default {
  name: 'App',
  components: {
    MusicItem
  },
  data(){
    return{
      playlists:[]
    }
  },
  mounted(){
    axios.get("http://localhost:4000/top/playlist?cat=华语").then(res=>{
      
      this.playlists = res.data.playlists
    })
  }
}

</script>

<style>
#app{
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(3,1fr);
  }
</style>